<template>
	<div class="list">
		<div class="tab">
			<el-table
				:data="tableData"
				border
				style="width: 100%">
				<el-table-column
					type="index"
					label="序号"
					align='center'
					sortable
					width="100">
				</el-table-column>
				<el-table-column
					label="名称"
					align='center'
					width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.goods_name }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="设备类型"
					align='center'
					width="100">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.device_type }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="描述"
					align='center'
					width="300">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.desc }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="创建时间"
					align='center'>
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.create_time }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="更新时间"
					align='center'>
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.update_time }}</span>
					</template>
				</el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                    <el-button @click="update_goods(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="goods_delete(scope.$index, scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
			</el-table>
		</div>
		<div class="page">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="paginations.page_index"
			  :page-sizes="paginations.page_sizes"
			  :page-size="paginations.page_size"
			  :layout="paginations.layout"
			  :total="paginations.total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
import{allgoods,delete_goods} from '../../api/api.js'
	export default {
		name:"list",
		data() {
			return {
				tableData:[], //数据
				paginations:{
					page_index:1, //当前页
					total:0, //总数
					page_size:5, //一页显示多少
					page_sizes:[5,10,15,20], //每页显示多少条
					layout:'total, sizes, prev, pager, next, jumper'
				},
				allTableData:[]
			}
		},
		methods: {
			//货物修改
			update_goods(index, row){
				this.$router.push({path:'/update_goods',query: {id:row.id}})
			},
			//货物删除
            goods_delete(index, row){
                var params = {
                    id:row.id
                    };
                delete_goods(params).then(res=>{
                this.$message(res.message)
                this.$router.go(0);
                })
            },
			//获取所有用户信息
            all_goods() {
                var params = {
            };
            allgoods(params).then(res=>{
                console.log(res)
                const data = res;
                this.allTableData = data;
                this.setPaginations()
            })
            },
			setPaginations(){
				this.paginations.total = this.allTableData.length; //数据的数量
				this.paginations.page_index = 1; //默认显示第一页
				this.paginations.page_size = 5; //每页显示多少数据
				
				//显示数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < this.paginations.page_size;
				})
			},
			handleSizeChange(page_size) {
				this.paginations.page_index = 1; //第一页
				this.paginations.page_size = page_size; //每页先显示多少数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < page_size
				})
			},
			handleCurrentChange(page){
				// 跳转页数
				//获取当前页
				let index = this.paginations.page_size * (page -1);
				//获取总数
				let allData = this.paginations.page_size * page;
				
				let tablist=[];
				for(let i = index;i<allData;i++) {
					if (this.allTableData[i]) {
						tablist.push(this.allTableData[i])
					}
					this.tableData = tablist
				}
			}
		},
		created(){
			this.all_goods()
		}
	}
</script>

<style scoped>
	.list {
		margin: 20px;
	}
	.page {
		float: right;
		margin-top: 20px;
	}
</style>